import 'package:flutter/material.dart';
import 'package:flutter_base/page/common/webview_page.dart';
import 'package:flutter_base/page/common/webview_widget.dart';
import 'package:flutter_base/page/hot/search/search_page.dart';
import 'package:flutter_base/utils/navigator_utils.dart';
import 'package:flutter_base/viewmodel/hot/hot_key_vm.dart';
import 'package:provider/provider.dart';

import '../../bean/hot/common_website_entity.dart';
import '../../bean/hot/search_hot_key_entity.dart';

///
/// @DIR_PATH：lib/page/hot
/// @TIME：2024/6/11 14:43
/// @AUTHOR：starr
/// 热点界面
class HotKeyPage extends StatefulWidget {
  const HotKeyPage({super.key});

  @override
  State<StatefulWidget> createState() => _HotKeyPageState();
}

class _HotKeyPageState extends State<HotKeyPage>
    with AutomaticKeepAliveClientMixin {
  HotKeyViewModel viewModel = HotKeyViewModel();

  @override
  void initState() {
    super.initState();
    viewModel.initHotData();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) {
          return viewModel;
        },
        child: Scaffold(
          body: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  //搜索热词标题
                  Container(
                    decoration: const BoxDecoration(
                        border: Border(
                      top: BorderSide(width: 0.5, color: Colors.grey),
                      bottom: BorderSide(width: 0.5, color: Colors.grey),
                    )),
                    padding: const EdgeInsets.symmetric(
                        horizontal: 20, vertical: 10),
                    child: Row(
                      children: [
                        const Text("搜索热词",
                            style:
                                TextStyle(fontSize: 14, color: Colors.black)),
                        const Expanded(child: SizedBox()),
                        InkWell(
                          onTap: (){
                            NavigatorUtils.openPageByFade(context, SearchPage(keyword: "",));
                          },
                          child: Image.asset("assets/images/a/search.png",
                              width: 30, height: 30),
                        )

                      ],
                    ),
                  ),
                  //搜索热词列表
                  Consumer<HotKeyViewModel>(builder: (context, vm, child) {
                    return _gridView(false, hotKeyList: vm.hotKeyList,
                        itemTap: (value) {
                          NavigatorUtils.openPageByFade(context, SearchPage(keyword: value,));
                    });
                  }),

                  //常用网站标题
                  Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        border: Border(
                      top: BorderSide(width: 0.5, color: Colors.grey),
                      bottom: BorderSide(width: 0.5, color: Colors.grey),
                    )),
                    padding: const EdgeInsets.symmetric(
                        horizontal: 20, vertical: 10),
                    child: const Text("常用网站",
                        style: TextStyle(fontSize: 14, color: Colors.black)),
                  ),
                  //常用网站列表
                  Consumer<HotKeyViewModel>(builder: (context, vm, child) {
                    return _gridView(true, websiteList: vm.websiteList,
                        itemTap: (value) {
                      NavigatorUtils.openPageByFade(
                          context,
                          WebViewPage(
                            title: "常用网站",
                            showTitle: true,
                            loadResource: value,
                            webViewType: WebViewType.URL,
                          ));
                    });
                  }),
                ],
              ),
            ),
          ),
        ));
  }

  Widget _gridView(bool isWebsite,
      {List<CommonWebsiteEntity>? websiteList,
      List<SearchHotKeyEntity>? hotKeyList,
      ValueChanged<String>? itemTap}) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      child: GridView.builder(
          // 优化
          shrinkWrap: true,
          // 禁止滑动
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              //主轴间距
              mainAxisSpacing: 5,
              //主轴最大宽度
              maxCrossAxisExtent: 120,
              //宽高比
              crossAxisSpacing: 5,
              //横轴间距
              childAspectRatio: 2.5),
          itemBuilder: (context, index) {
            if (isWebsite) {
              return _item(
                  name: websiteList?[index].name,
                  itemTap: itemTap,
                  link: websiteList?[index].link);
            } else {
              return _item(name: hotKeyList?[index].name, itemTap: itemTap);
            }
          },
          itemCount: isWebsite == true
              ? websiteList?.length ?? 0
              : hotKeyList?.length ?? 0),
    );
  }

  Widget _item({String? name, ValueChanged<String>? itemTap, String? link}) {
    return GestureDetector(
        onTap: () {
          if (link != null) {
            itemTap?.call(link ?? "");
          } else {
            itemTap?.call(name ?? "");
          }
        },
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
              border: Border.all(color: Colors.grey, width: 0.5),
              borderRadius: const BorderRadius.all(Radius.circular(10))),
          child: Text(
            name ?? "",
            textAlign: TextAlign.center,
          ),
        ));
  }

  @override
  bool get wantKeepAlive => true;
}
